var path = require('path');
// 引入webpack,为其他插件使用
var webpack = require('webpack');
// 把首页生成到内存中,并且自动引入JS
var html_webpack_plugin = require('html-webpack-plugin');
// 配置抽取CSS文件的插件 下载npm install --save-dev extract-text-webpack-pluginxia
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
// 配置压缩css文件的插件 下载optimize-css-assets-webpack-plugin
var optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');


//// 配置每次运行发布命令的时候,清除dist目录,再生成,
// 作用: 如果我修改了配置,那么之前生成的dist的文件会多余,那么用这个,会先干掉这个文件夹,然后再生成,就不会有垃圾了
var cleanwebpackplugin = require('clean-webpack-plugin');

module.exports = {
    // 使用配置文件置顶程序的打包入口文件
    entry: { //entry变成了对象
        app: path.join(__dirname, 'main.js'),
        // 使用下面的方式,将JS里面用到的插件以单独JS文件的方式抽取出来
        vendors: ['jquery']
    },
    // 指定打包之后输出的路径和文件名称
    output: {
        // 指定输出的文件夹路径
        path: path.join(__dirname, 'dist'),
        // 指定生成的文件
        // filename: 'build.js'
        // 把这个js放在js的文件夹下
        filename: 'js/build.js'

    },
    // 配置的是多有的文件处理的方式
    module: {
        // 文件处理的规则
        rules: [
            // 处理css文件的规则(后面两个顺序不能写反,规则是从右往左加载)
            // { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // 配置抽取css,需要配置的如下
            {
                test: /\.css$/,
                use: extractTextWebpackPlugin.extract({
                    // 使用loader最终想要用什么loader去处理他
                    fallback: 'style-loader',
                    use: 'css-loader',
                    // 这个属性,是用来告诉css文件,程序的根目录在哪里
                    publicPath: '../'
                })
            },
            // 处理scss文件的规则(下载sass-loader 的时候,它有一个依赖包 node-sass,所以两个要一起下载)
            // { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },

            // // 配置抽取scss,需要配置的如下
            {
                test: /\.scss$/,
                use: extractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader'],
                    // 这个属性,是用来告诉css文件,程序的根目录在哪里
                    publicPath: '../'
                })
            },

            // 处理less文件的规则,要装less 和  less-roader
            {
                test: /\.less$/,
                use: extractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader'],
                    publicPath: '../'
                })
            },

            // 处理图片文件的规则(file-loader和url-loader都可以处理图片),但是url-loader依赖file-loader,所以如果使用url-loader,那两个都要下载
            // url-loader和file-loader区别:url-loader 会把图片转成base64,并且有limit的限制某个大小以上的图片不进行base64编码, 1024==1kb
            // name=img-[hash:8].[ext] 只要图片名字的hash的前八位,ext代表文件拓展名不变,可以加img-前缀
            // 将图片放入统一的images文件夹之下
            { test: /\.(png|bmp|jpg|jpeg)$/, use: ['url-loader?limit=1024&name=images/img-[hash:8].[ext]'] },
            //-----------------------------------------------------------------------//
            // 处理JS文件的规则(babel-loader依赖babel-core babel-plugin-transform-runtime(插件) )
            // 还要装 babel-preset-es2015(es6的语法包)   babel-preset-stage-0 (es7的语法规则)
            // babel-preset-env(es6语法包了替代了上面两个) 这包现在顶替上面两个文件了,上面两个过时了,同时在.babelrc第一条配置一个就行了
            //  exclude: /node_modules/ 要排除这个文件夹,否则会报错,太大了,这个也是我不需要的
            // 同时加一个文件.babelrc,在里面配置一下
            { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ }
        ]
    },

    // 配置webpck插件
    plugins: [

        // 配置html插件
        new html_webpack_plugin({
            // 配置插件所操作文件的模板
            template: path.join(__dirname, 'index.html'),
            // 生成的html文件的名称
            filename: 'index.html',
            // 优化压缩HTML文件
            minify: { // 压缩HTML代码 
                collapseWhitespace: true, // 合并空白字符 
                removeComments: true, // 移除注释 
                removeAttributeQuotes: true // 移除属性上的引号 
            }
        }),
        // 配置抽取分离第三方包
        // optimize优化插件
        // CommonsChunkPlugin 共同的主干插件
        new webpack.optimize.CommonsChunkPlugin({
            // 这个属性找得是entry节点下配置的属性名
            // names: ['vendor3', 'vendor2', 'vendor1']  如果有多个,则可以这样,数组的形式
            name: 'vendors', //把什么东西分离出来,这里name的值,要和上面的entry的属性名一样
            // 这里指定三方包分离出来之后,以什么文件名去命名
            // filename: 'vendors.js'
            // 把这个js文件,放在js文件夹下
            filename: 'js/vendors.js'
        }),
        // 配置每次运行发布命令的时候,清除dist目录
        new cleanwebpackplugin(['dist']),
        //---------------------------
        // 优化压缩JS代码的插件
        new webpack.optimize.UglifyJsPlugin({ // 优化压缩JS 
            compress: {
                warnings: false // 移除警告 
            }
        }),
        // 如果只配置上面的步奏,可能有的电脑会报错,需要将Nodo环境设置成生产环境
        new webpack.DefinePlugin({ // 设置为产品上线环境
            'process.env.NODE_ENV': '"production"'
        }),
        //---------------------------
        // 配置抽取CSS文件的插件 里面的参数就是你抽取出来的css文件用什么名称去装载
        // new extractTextWebpackPlugin('styles.css'),
        // 配置css到css文件夹中, 会报错,找不到里面的图片,找到test: /\.css$/,还有scss和less也要配置,加publicPath属性,配置程序根目录
        // css/style.css  或者给他自己定义一个css名字
        new extractTextWebpackPlugin('css/[name].css'),
        // 配置压缩css文件的插件 ,需要下载
        new optimizeCssAssetsWebpackPlugin()
    ]
}